<template>
	<view class="app">
			<section class="top">
				<view class="img" :style="{backgroundImage:`url(${url1})`}">
				<view class="userimg">
					<view class="userdiv"></view>
					<view class="name">{{username}}</view>
				</view>
				<view class="change" @click="listern"></view>
				</view>
			</section>
			<view class="preferencediv">
				<view class="msg"><text>偏好显示</text></view>
				<view class="box">
					{{data}}
				</view>
				<view class="set">
					<view class="msg1"><text class="pre">偏好设置</text></view>
					<view class="btndiv">
						<button class="btn" @click="reserve">确定保存</button>
					</view>
					
				</view>
					<view class="setting">
						<textarea auto-blur @input="check" auto-height @blur="up" class="area" v-model="suggest" confirm-type ="done" placeholder="最多不超过120个字" />
					</view>
				    
			        <view class="leave">
			        	<button class="button" @click="leave">退出登录</button>
			        </view>
			</view>
	
		
	</view>
</template>

<script>
import getHeader from '@/api/api.js'
import { mapState, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				username:'',
				data:'',
				btnover:false,
				url1:'/static/1.jpg',
			    suggest:'',
				finish:'',
				timer:null,
				ID:0,
				issaving:false
			}
		},
		computed:{
		...mapState(['isLogin','usernamevuex'])	,
		...mapGetters(['usernameget'])
		},
		methods: {
			
			up(){
				this.finish=this.suggest
			},
			
		async reserve() {
			if(this.issaving){
				return
			}
			this.issaving=true
		 
		  try {
			   uni.showLoading({ title: '保存中', mask: true })
			   console.log(getHeader());
		    const tokenRes = await uni.getStorage({ key: 'token' })
		    const res = await uni.request({
		      url: '/api/favorite',
		      method: 'PUT', 
			  header:getHeader(),
		      data: { id: this.ID, favorite: this.finish }
		    })
		    if (res[1].statusCode === 200) {
		      uni.showToast({ title: '保存成功' })
			  this.data=this.finish
			  this.suggest=''
		    } else {
		      uni.showToast({ title: '保存失败', icon: 'none' })
		    }
		  } catch (err) {
		    uni.showToast({ title: '您未登录', icon: 'none' })
		  } finally {
		    uni.hideLoading()
			this.issaving=false
		  }
		},
			leave(){
				uni.showModal({
					content:'确定退出登录？',
					success: (res) => {
						if(res.confirm){
							this.data=''
							this.username=''
							uni.removeStorageSync('token')
							this.$store.dispatch('leave',this.username)
								uni.removeStorage({
									key:'preference',
									success:  (res)=> {
											console.log(res);
											this.data=''
											this.username='未登录'
										this.timer=	setTimeout(()=>{
												uni.navigateTo({
													url:'/pages/login/login'
												})
											},3000)
									uni.removeStorageSync('username')
									uni.removeStorageSync('id')
										}
								})
						}
					}
				})
			
				
				
			},
			check(){
				const q=this.suggest.trim()
				const m=q.replace(/\s+/g, '')
				if(m.length>=120){
					uni.showToast({
						title:'以达到最大限度',
						position:'center',
						icon:'none'
					})
				}
			},
			listern(){
			 // // 使用 uni-app 的选择器 API
			 //      uni.createSelectorQuery().in(this).select('.change').fields({
			 //        computedStyle: ['backgroundImage']
			 //      }, res => {
			 //        if (res && res.backgroundImage) {
			 //          console.log('背景图:', res.backgroundImage);
			 //          // 处理背景图 URL
			 //        }
			 //      }).exec();
			 uni.navigateTo({
			 	url:'/pages/photos/photos',
				events:{
				acceptData:((data)=>{
					console.log(data);
					this.url1=data.data
				})
				}
			 })
			},
			
	 onShow() {
			console.log(this.url1);
			uni.getStorage({
				key:'id',
				success: (res) => {
					this.ID=res.data
				}
			})
			try{//调用获取偏好接口
				uni.request({
					url:'http://localhost:8080/favorite/get',
					method:'GET',
					header:getHeader(),
					data:{
					id:this.ID
					},
					//调用偏好信息接口
					success: (res) => {
						console.log(res);
						this.data=res.data.data
					}
				})
			}catch(err){
				
			}
		uni.getStorage({
				key:'token',
			  success: () => { 
				 //  console.log(this.usernameget.data);
			  // this.username=this.usernameget.data
			  uni.getStorage({
				  key:'username',
				  success: (res) => {
				  	this.username=res.data
				  }
			  })
			  },
			 fail: () => {
			 	this.username='未登录'
			 }
			})
		},
	beforeUnmount(){
		clearTimeout(this.timer)
	}
	},
	}
</script>

<style scoped>
.app{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.top{
	width: 100%;
	background-color: aliceblue;
	position: relative;
	height: 400rpx;
}
.img{
	width:100%;
	height: 100%;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.userimg{
	position: absolute;
	bottom: 20rpx;
	left: 0;
	width: 100%;
	display: flex;
}
.userdiv{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: aliceblue;
	margin-left: 5%;
	background-image: url('/static/touxiang (1).png');
	background-size: cover;
	background-repeat: no-repeat;
}
.name{
	margin-left: 5%;
	text-align: center;
	line-height: 100rpx;
	font-size: 45rpx;
	color: white;
	font-weight:600;
}
.change{
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	width:80rpx;
	height: 80rpx;
	background-image: url('/static/paizhao.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.preferencediv{
	width: 90%;
	margin-top: 5%;
	background-color: white;
	box-shadow:2rpx 8rpx 20rpx rgba(0, 0, 0, 0.1) ;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.box{
		width: 90%;
		border: 2rpx solid #eee;
		margin-bottom: 20rpx;
		height: auto;
		min-height: 300rpx;
		 word-break: break-all;
	}
	.area{
		border: 2rpx solid #eee;
		width: 90%;
		padding: 4rpx 10rpx;
	}
	.btndiv{
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		 border-radius: 8rpx;
	}
	.btn{
		width: 200rpx;
		height: 70%;
		box-sizing: border-box;
		border:none;
		font-size: 25rpx;
		color:white;
		 border-radius: 8rpx;
		 background-color: #409EFF;
		 cursor: pointer;
		  display: flex;
		   justify-content: center;
		   align-items: center;
	}
	.btn:active{
	     background-color: #3a8ee6;
	}
	.set{
		width: 90%;
		height: 60rpx;
		display: flex;
		align-items: center;
	  justify-content: space-between;
	}
.msg1{
		display: inline-block;
	}
.msg{
		width: 100%;
		margin-top: 10rpx;
		box-sizing: border-box;
		padding-left: 5%;
		line-height: 50rpx;
		height: 50rpx;
		font-size: 40rpx;
		
		
	}
.leave{
	width: 90%;
	display: flex;
	justify-content: center;
	margin-top: 20rpx;
	}
	.button{
		width: 80%;
		font-size: 30rpx;
		line-height: 70rpx;
		margin-bottom: 50rpx;
		background-color: #f8e3e7;
		color: #e99b9e;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.05);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}
	.button:active{
		transform: translateY(-10rpx);
		box-shadow: 0 10rpx 20rpx rgb(0,0,0,0.15);
	}
	.pre{
		font-size: 40rpx;
	}
	.setting{
		margin-top: 10rpx;
		width: 90%;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #eee;
		box-sizing: border-box;
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}
	.setting:hover{
		transform: translateY(-10rpx) scale(1.02);
		box-shadow: 0 8rpx 20rpx rgb(0,0,0,0.15);
		border: 1rpx solid #409EFF;
		
	}
	@media (min-width: 768px) {
	  .top {
	    height: 500rpx !important;
	  }
	  .preferencediv {
	    width: 80% !important;
	  }
	}
	@media (max-width:360rpx){
		.btn{
			font-size: 20rpx;
		}
	.pre{
		font-size: 30rpx;
	}
	.msg{
		font-size: 30rpx;
	}
	}
	@media (min-width: 992px) {
	  .top {
	    height: 600rpx !important;
	  }
	  .preferencediv {
	    width: 60% !important;
	    max-width: 800px;
	  }
	}
</style>
